<template>
  <a-tabs defaultActiveKey="1">
    <a-tab-pane tab="线条" key="1">
      <a-row>
        <a-col :span="8">标题</a-col>
        <a-col :span="14">
          <a-input v-model:value="edgeAttr.label" style="width: 100%" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">宽度</a-col>
        <a-col :span="12">
          <a-slider
            :min="1"
            :max="5"
            :step="1"
            v-model:value="edgeAttr.strokeWidth"
          />
        </a-col>
        <a-col :span="2">
          <div class="result">{{ edgeAttr.strokeWidth }}</div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">颜色</a-col>
        <a-col :span="14">
          <a-input
            type="color"
            v-model:value="edgeAttr.stroke"
            style="width: 100%"
          />
        </a-col>
      </a-row>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { FlowGraph } from '@/common/FlowGraph'
import { defineComponent, reactive, watch, toRefs, ref, nextTick } from 'vue'
interface IFEdgeAttr {
  stroke: string
  strokeWidth: number
  label: string
}
export default defineComponent({
  name: 'ConfigEdge',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const edgeAttr = reactive<IFEdgeAttr>({
      stroke: '#5F95FF',
      strokeWidth: 1,
      label: ''
    })
    const isByIdGetInfo = ref(false)
    const { id } = toRefs(props)
    const getEdge = (id: string) => {
      const cell = FlowGraph.graph.getCellById(id)
      if (!cell || !cell.isEdge()) {
        return null
      }
      return cell
    }
    watch(edgeAttr, () => {
      // 如果是根据 id 获取详情引起的变化则不必触发后续操作
      if (isByIdGetInfo.value) return
      const cell = getEdge(id.value)
      if (!cell) {
        return
      }
      cell.attr('line/strokeWidth', edgeAttr.strokeWidth)
      cell.attr('line/stroke', edgeAttr.stroke)
      cell.setLabels(edgeAttr.label)
    })
    watch(id, () => {
      const cell = getEdge(id.value)
      if (!cell) {
        return
      }
      isByIdGetInfo.value = true
      const connector = cell.getConnector() || {
        name: 'normal'
      }
      edgeAttr.stroke = cell.attr('line/stroke')
      edgeAttr.strokeWidth = cell.attr('line/strokeWidth')
      edgeAttr.label = (cell.getLabels()[0]?.attrs as any)?.label?.text || ''
      nextTick(() => {
        isByIdGetInfo.value = false
      })
    })

    return {
      edgeAttr
    }
  }
})
</script>

<style lang="less" scoped></style>
